<template>
  <div class="p-2">
    <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
      <div v-show="showSearch" class="mb-[10px]">
        <!-- 添加跳转按钮 -->
        <el-button :type="'default'" style="height: 40px; margin: 20px 20px 20px 20px" @click="goToAPage">政策性补贴统计</el-button>
        <!-- 添加跳转按钮 -->
        <el-button :type="'primary'" style="height: 40px; margin: 20px 20px 20px 20px" @click="goToBPage">在保土地面积统计</el-button><br>

        <el-card shadow="hover">

          <el-form ref="queryFormRef" :model="queryParams_region" :inline="true">

            <el-form-item label="地区" prop="region">
              <el-select v-model="queryParams_region.region" placeholder="请选择地区" @change="handleCityChange">
                <el-option v-for="region in cityOptions" :key="region.id" :label="region.name" :value="region.name" />
              </el-select>
            </el-form-item>
            <el-form-item label="保险公司" prop="company">
              <el-input v-model="queryParams_region.company" placeholder="请输入保险公司" clearable />
            </el-form-item>
            <el-form-item label="创建时间" style="width: 350px">
              <el-date-picker
                v-model="dateRangeCreateTime"
                value-format="YYYY-MM-DD HH:mm:ss"
                type="daterange"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]"
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
              <el-button icon="Refresh" @click="resetQuery">重置</el-button>


            </el-form-item>
          </el-form>
        </el-card>

      </div>
    </transition>

    <!-- 图表 -->
    <el-card shadow="never">
      <el-row :gutter="10" class="mt-5">
        <el-col :xs="24" :span="24">
          <charts_region :Nyt7StatisticsInsureNumRegionList="Nyt7StatisticsInsureNumRegionList" id="charts_region" width="100%" height="500px" />
        </el-col>
      </el-row>
    </el-card>

    <el-card shadow="never">
      <el-row :gutter="10" class="mt-5">
        <el-col :xs="24" :span="24">
          <charts_company :Nyt7StatisticsInsureNumCompanyList="Nyt7StatisticsInsureNumCompanyList" id="charts_company" width="100%" height="500px" />
        </el-col>
      </el-row>
    </el-card>

  </div>
</template>

<script setup name="Nyt7StatisticsInsureNumRegion" lang="ts">
import { listNyt7StatisticsInsureNumRegion } from '@/api/Nyt7StatisticsInsureNumRegion/Nyt7StatisticsInsureNumRegion';
import {
  Nyt7StatisticsInsureNumRegionVO,
  Nyt7StatisticsInsureNumRegionQuery,
  Nyt7StatisticsInsureNumRegionForm
} from '@/api/Nyt7StatisticsInsureNumRegion/Nyt7StatisticsInsureNumRegion/types';
import { Nyt7RegionManagementVO } from '@/api/Nyt7RegionManagement/Nyt7RegionManagement/types';
import { listNyt7RegionManagement } from '@/api/Nyt7RegionManagement/Nyt7RegionManagement';
import charts from '../claim_charts/charts.vue';
import Charts_region from '@/views/Nyt7StatisticsInsureNumRegion/claim_charts/charts_region.vue';
import Charts_company from '@/views/Nyt7StatisticsInsureNumRegion/claim_charts/charts_company.vue';
import { listNyt7StatisticsInsureNumCompany } from '@/api/Nyt7StatisticsInsureNumCompany/Nyt7StatisticsInsureNumCompany';
import {
  Nyt7StatisticsInsureNumCompanyForm, Nyt7StatisticsInsureNumCompanyQuery,
  Nyt7StatisticsInsureNumCompanyVO
} from '@/api/Nyt7StatisticsInsureNumCompany/Nyt7StatisticsInsureNumCompany/types';
import { useRouter } from 'vue-router';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;

const Nyt7StatisticsInsureNumRegionList = ref<Nyt7StatisticsInsureNumRegionVO[]>([]);
const Nyt7StatisticsInsureNumCompanyList = ref<Nyt7StatisticsInsureNumCompanyVO[]>([]);
const loading = ref(true);
const showSearch = ref(true);

const total = ref(0);
const dateRangeCreateTime = ref<[DateModelType, DateModelType]>(['', '']);

const queryFormRef = ref<ElFormInstance>();
//dinghies区域管理数据和选项
const regionManagementList = ref<Nyt7RegionManagementVO[]>([]);
const cityOptions = ref<Nyt7RegionManagementVO[]>([]);
const countyOptions = ref<Nyt7RegionManagementVO[]>([]);

const initFormData_region: Nyt7StatisticsInsureNumRegionForm = {
  nextRegion: undefined,
  region: undefined,
  company: undefined
};
const data_region = reactive<PageData<Nyt7StatisticsInsureNumRegionForm, Nyt7StatisticsInsureNumRegionQuery>>({
  form: { ...initFormData_region },
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    region: undefined,
    company: undefined,
    params: {
      createTime: undefined
    }
  },
  rules: {}
});

const initFormData_company: Nyt7StatisticsInsureNumCompanyForm = {
  company: undefined
};

const data_company = reactive<PageData<Nyt7StatisticsInsureNumCompanyForm, Nyt7StatisticsInsureNumCompanyQuery>>({
  form: { ...initFormData_company },
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    company: undefined,
    params: {
      createTime: undefined
    }
  },
  rules: {}
});

const { queryParams: queryParams_region } = toRefs(data_region);
const { queryParams: queryParams_company } = toRefs(data_company);

//获取区域管理数据的方法
const getRegionManagementList = async () => {
  const res = await listNyt7RegionManagement();
  regionManagementList.value = res.data;
  cityOptions.value = regionManagementList.value.filter((item) => item.pid == '182754');
};

//处理市的选择变化
const handleCityChange = (cityName: string) => {
  const selectedCity = cityOptions.value.find((region) => region.name === cityName);
  if (selectedCity) {
    countyOptions.value = regionManagementList.value.filter((item) => item.pid === selectedCity.id);
  } else {
    countyOptions.value = [];
  }
};

/** 查询统计分析_投保统计_数量统计_按地区的数量统计列表 */
const getList = async () => {
  loading.value = true;
  queryParams_region.value.params = {};
  proxy?.addDateRange(queryParams_region.value, dateRangeCreateTime.value, 'CreateTime');
  if (queryParams_region.value.region == null) queryParams_region.value.region = '';
  const res_region = await listNyt7StatisticsInsureNumRegion(queryParams_region.value);
  Nyt7StatisticsInsureNumRegionList.value = res_region.rows;
  console.log('re', Nyt7StatisticsInsureNumRegionList.value);
  total.value = res_region.total;
  loading.value = false;
};

/** 查询统计分析_投保统计_数量统计_按保险公司的数量统计列表 */
const getList_company = async () => {
  queryParams_company.value.params = {};
  proxy?.addDateRange(queryParams_region.value, dateRangeCreateTime.value, 'CreateTime');
  if (queryParams_region.value.company == null) queryParams_region.value.company = '';
  const res_company = await listNyt7StatisticsInsureNumCompany(queryParams_region.value);
  Nyt7StatisticsInsureNumCompanyList.value = res_company.rows;
  console.log('co', Nyt7StatisticsInsureNumCompanyList.value);
  total.value = res_company.total;
};

/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams_region.value.pageNum = 1;
  queryParams_company.value.pageNum = 1;
  getList();
  getList_company();
};

/** 重置按钮操作 */
const resetQuery = () => {
  dateRangeCreateTime.value = ['', ''];
  queryFormRef.value?.resetFields();
  handleQuery();
};

const router = useRouter();

const goToAPage = () => {
  router.push({ name: 'Nyt7StatisticsInsureSubRegion' });
};

const goToBPage = () => {
  router.push({ name: 'Nyt7StatisticsInsureNumRegion' });
};

onMounted(() => {
  getList();
  getRegionManagementList();
  getList_company();
});
</script>
